<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<html>
<head>
<%
String clientId=(String)request.getAttribute("clientId");
String clientName=(String)request.getAttribute("clientName");
%>
<title>Client - <%=clientName %></title>
<%@include file="/WEB-INF/css.jsp" %>
<%@include file="/WEB-INF/javascript.jsp" %>
<style>
</style>
<script>
$(document).ready(function(){
	$('#ServiceFiltersContainer').buttonset().change(function(){
		$('#ServicesContainer').empty();
		// Collect all filters, get clients by filters.
		var filters={
	    	"clientId":'<%=clientId%>'
		};
		$('#ServiceFiltersContainer :checked').each(function(){
			filters[$(this).attr('name')]=true;
		});
		$.ajax({
			url:"/AjaxGetMyClientServices",
			type:"GET",
			data:filters,
			dataType:"json",
			success:function(data,status,xhr){
				var services=data.data;
				var servicesContainer=$('#ServicesContainer');
				if(services!=null&&services.length>0){
					for(var i=0;i<services.length;i++){
						servicesContainer.append('<div class="ServiceCard">'+
						'<div class="ServiceCardInfo">'+
						'<div style="float:left;width:20%;">Type: <a href="/GetService?serviceId='+services[i].serviceId+'&clientId=<%=clientId%>&clientName=<%=clientName%>">'+(services[i].Type==undefined?"":services[i].Type)+'</a></div>'+
						'<div style="float:left;width:10%;">Fee: $'+(services[i].Fee==undefined?"":services[i].Fee)+'</div>'+
						'<div style="float:left;width:20%;">'+(services[i].Billable!=undefined&&services[i].Billable==true?"Billable":"Non-Billable")+'</div>'+
						'<div style="float:left;width:10%;">'+(services[i].Billed!=undefined&&services[i].Billed==true?"Billed":"Unbilled")+'</div>'+
						'<div style="float:left;width:30%;">Due Date: '+(services[i].DueDate==undefined?"":services[i].DueDate)+'</div>'+
						(services[i].CompletedDate!=undefined?'<div style="float:left;width:10%;color:green;">Completed</div>':'<div style="float:left;width:10%;color:red;">Incomplete</div>')+
						'</div></div>');
					}
				}else{
					servicesContainer.append('<div class="ServiceCard">No Services Found</div>');
				}
			},
			error:function(xhr,status,error){
				alert('Error:'+error);
			}
		});
	});
	$('#ClientDetailsButton').button().click(function(){
		window.location.href='/GetClient?clientId=<%=clientId %>';
	});
	$('#ClientInvoicesButton').button().click(function(){
		window.location.href='/invoices.jsp?clientId=<%=clientId %>&clientName=<%=clientName%>';
	});
	$('#AddServicesButton').button().click(function(){
		$('#ServiceTemplateDialog').dialog('open');
	});
	// Load all client services
	$.ajax({
		url:"/AjaxGetMyClientServices",
		type:"GET",
		data:{
			"clientId":'<%=clientId%>',
			FilterCompleted:true,
			FilterIncomplete:true,
			FilterBillable:true,
			FilterNonBillable:true
		},
		dataType:"json",
		success:function(data,status,xhr){
			var services=data.data;
			var servicesContainer=$('#ServicesContainer');
			if(services!=null&&services.length>0){
				for(var i=0;i<services.length;i++){
					servicesContainer.append('<div class="ServiceCard">'+
					'<div class="ServiceCardInfo">'+
					'<div style="float:left;width:20%;">Type: <a href="/GetService?serviceId='+services[i].serviceId+'&clientId=<%=clientId%>&clientName=<%=clientName%>">'+(services[i].Type==undefined?"":services[i].Type)+'</a></div>'+
					'<div style="float:left;width:10%;">Fee: $'+(services[i].Fee==undefined?"":services[i].Fee)+'</div>'+
					'<div style="float:left;width:20%;">'+(services[i].Billable!=undefined&&services[i].Billable==true?"Billable":"Non-Billable")+'</div>'+
					'<div style="float:left;width:10%;">'+(services[i].Billed!=undefined&&services[i].Billed==true?"Billed":"Unbilled")+'</div>'+
					'<div style="float:left;width:30%;">Due Date: '+(services[i].DueDate==undefined?"":services[i].DueDate)+'</div>'+
					(services[i].CompletedDate!=undefined?'<div style="float:left;width:10%;color:green;">Completed</div>':'<div style="float:left;width:10%;color:red;">Incomplete</div>')+
					'</div></div>');
				}
			}else{
				servicesContainer.append('<div class="ServiceCard">No Services Found</div>');
			}
		},
		error:function(xhr,status,error){
			alert('Error:'+error);
		}
	});
});
</script>
</head>
<body>
<%@include file="/WEB-INF/clientnavigation.jsp" %>
<div class="ListContainer">
<div class="ActionsContainer" style="margin:10px;">
<button id="ClientDetailsButton">Back To Client Details</button>
<button id="AddServicesButton">Add Services</button>
<button id="ClientInvoicesButton">Invoices</button>
<input id="clientId" name="clientId" type="hidden" value="<%=clientId%>"/>
<input id="clientName" name="clientName" type="hidden" value="<%=clientName%>"/>
<%@include file="/WEB-INF/servicetemplatedialog.jsp" %>
</div>
<div id="ServiceFiltersContainer" style="margin-bottom:10px;">
Filters:
<input id="FilterCompleted" name="FilterCompleted" type="checkbox" checked="checked"/><label for="FilterCompleted">Completed</label>
<input id="FilterIncomplete" name="FilterIncomplete" type="checkbox" checked="checked"/><label for="FilterIncomplete">Incomplete</label>
<input id="FilterBillable" name="FilterBillable" type="checkbox" checked="checked"/><label for="FilterBillable">Billable</label>
<input id="FilterNonBillable" name="FilterNonBillable" type="checkbox" checked="checked"/><label for="FilterNonBillable">Non-Billable</label>
</div>
<div id="ServicesContainer">
</div>
</div>
</body>
</html>